$(function () {
    // 发送请求获取真正的数据 并通过JS渲染到页面上
    function sendAjax(num) {
        $.ajax({
            url: "/php/requestList.php",
            data: {
                page: num
            },
            type: "get",
            dataType: "json",
            success(data) {
                var str = "";
                data.forEach(value => {
                    let icon = JSON.parse(value.family).iconUrl;
                    let price = 0;
                    try
                    {price = JSON.parse(value.price).raw;}
                    catch(e){
                        console.log("免费");
                    }
                    str +=
                        `
                        <li class="list-group-item col-lg-3 goodItem"
                        style="background: linear-gradient(rgba(34, 36, 44, 0) 145px, rgba(34, 36, 44, 0.59) 215px,
                        rgb(34, 36, 44) 380px), 
                        url(${value.verticalImageUrl})
                        right top rgb(34, 36, 44); background-size:100%;"
                        >
                        <div class="panel panel-default">
                            <div class="panel-heading"><img
                                    src="${icon}"
                                    alt=""></div>
                            <div class="panel-body">
                                <h3><a href="../html/detail.html#${value.slug}">${value.title}</a></h3>
                                <h5>${value.description}</h5>
                            </div>
                            <footer class="h4  text-danger">￥${price}</footer>
                        </div>
                    </li>
                    `
                })

                $("#goodsList").html(str);

            }
        })
    }

    // 页面加载请求一次
    sendAjax(0);

    // 轮播图按钮
    
    $("#overwatch").on("click", function () {
        location.href = "./html/detail.html#overwatch";
    })
    $("#battlenet").on("click", function () {
        location.href = "./html/detail.html#balance";
    })
    $("#hearthstone").on("click", function () {
        location.href = "./html/detail.html#hearthstone-medivh-hero-set";
    })
    $("#wow").on("click", function () {
        location.href = "./html/detail.html#world-of-warcraft-game-time-cn";
    })

    // 获取总数据
    $(".myPagination").Pagination({
        page: 1,
        count: 76,
        limit: 9,
        groups: 9,
        onPageChange: function (page) {
            console.log("当前是:" + page);
            sendAjax(page - 1);
        }
    });

    //注销
    var $logoutBtn = $("#logout");
    function clearCookie() {
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        console.log(keys);
        if (keys) {
            for (var i = keys.length; i--;)
                document.cookie = keys[i] + '=0;domain=localhost;path=/;maxAge=-1;';
                // expires=' + new Date(0).toUTCString()
                // $.cookie(keys[i],null);
        }
    }
    // console.log($logoutBtn);
    $logoutBtn.on("click", function () {
        // console.log("aaa");
        clearCookie();
        history.go(0);
    })
})
